<template>
    <view class="container">
        <custom-nav-bar title="攻略详情" :showBack="true" />
        <view class="content">
            <image :src="guideInfo.coverUrl" mode="aspectFill" class="guide-image" />
            <view class="guide-content">
                <view class="guide-header">
                    <text class="guide-title">{{ guideInfo.title }}</text>
                    <view class="favorite-btn" @tap="toggleFavorite">
                        <image :src="isFavorite ? '/static/icons/star-filled.png' : '/static/icons/star.png'"
                            mode="aspectFit" class="favorite-icon" />
                    </view>
                </view>
                <text class="guide-desc">{{ guideInfo.description }}</text>
                <view class="guide-meta">
                    <text class="views">浏览 {{ guideInfo.views }}</text>
                    <text class="date">{{ guideInfo.createdAt }}</text>
                </view>
                <rich-text :nodes="guideInfo.content" class="guide-detail"></rich-text>
            </view>

            <!-- 相关营地推荐部分 -->
            <view class="related-camps" v-if="relatedCamps.length > 0">
                <view class="section-header">
                    <text class="section-title">相关营地推荐</text>
                </view>
                <scroll-view class="camp-scroll" scroll-x>
                    <view class="camp-list">
                        <view class="camp-item" v-for="camp in relatedCamps" :key="camp.id" @tap="onCampTap(camp)">
                            <image :src="camp.imageUrl" mode="aspectFill" class="camp-image" />
                            <view class="camp-info">
                                <text class="camp-name">{{ camp.name }}</text>
                                <view class="camp-meta">
                                    <text class="camp-score">{{ camp.score }}分</text>
                                    <text class="camp-price">¥{{ camp.price }}起</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { favoriteApi, campApi, guideApi } from '@/api/index'
import CustomNavBar from '@/components/custom-nav-bar/custom-nav-bar.vue'

const isFavorite = ref(false)

// 定义响应式数据，字段名与实体类保持一致
const guideInfo = ref({
    id: 0,
    title: '',
    description: '',  // 使用原字段名
    content: '',
    coverUrl: '',     // 使用原字段名
    categoryId: 0,
    views: 0,
    status: 1,
    createdAt: ''
})

// 相关营地数据
const relatedCamps = ref([])

// 页面加载时从URL参数接收数据
onLoad((options) => {
    if (options) {
        // 解码所有参数
        const data = {
            id: options.id,
            title: decodeURIComponent(options.title || ''),
            description: decodeURIComponent(options.description || ''),
            content: decodeURIComponent(options.content || ''),
            coverUrl: decodeURIComponent(options.coverUrl || ''),
            views: options.views,
            categoryId: options.categoryId,
            createdAt: decodeURIComponent(options.createdAt || '')
        }

        console.log('从URL参数接收到攻略数据:', data)
        guideInfo.value = { ...guideInfo.value, ...data }

        // 检查收藏状态并获取相关营地
        checkFavoriteStatus()
        getRelatedCamps()
    }
})

// 检查收藏状态
const checkFavoriteStatus = async () => {
    try {
        const userInfo = uni.getStorageSync('userInfo')
        if (!userInfo || !userInfo.id) {
            return
        }

        const res = await favoriteApi.checkFavorite(userInfo.id, guideInfo.value.id, 'guide')
        isFavorite.value = res.data
    } catch (error) {
        console.error('检查收藏状态失败:', error)
    }
}

// 切换收藏状态
const toggleFavorite = async () => {
    try {
        const userInfo = uni.getStorageSync('userInfo')
        if (!userInfo || !userInfo.id) {
            uni.showToast({
                title: '请先登录',
                icon: 'none'
            })
            return
        }

        if (isFavorite.value) {
            // 取消收藏
            await favoriteApi.deleteFavorite(userInfo.id, guideInfo.value.id, 'guide')
            uni.showToast({
                title: '已取消收藏',
                icon: 'success'
            })
        } else {
            // 添加收藏
            await favoriteApi.addFavorite(userInfo.id, guideInfo.value.id, 'guide')
            uni.showToast({
                title: '已加入收藏',
                icon: 'success'
            })
        }
        // 更新收藏状态
        isFavorite.value = !isFavorite.value
    } catch (error) {
        console.error('操作收藏失败:', error)
        uni.showToast({
            title: '操作失败',
            icon: 'none'
        })
    }
}

// 获取相关营地
const getRelatedCamps = async () => {
    if (!guideInfo.value.categoryId) return

    try {
        const res = await campApi.getCampList({
            categoryId: guideInfo.value.categoryId,
            limit: 5
        })
        relatedCamps.value = res.data
    } catch (error) {
        console.error('获取相关营地失败:', error)
    }
}

// 跳转到营地详情
const onCampTap = (camp) => {
    uni.navigateTo({
        url: `/pages/camp-detail/index?id=${camp.id}`
    })
}

</script>

<style>
.container {
    padding: 30rpx;
}

.guide-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
}

.guide-title {
    flex: 1;
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
}

.favorite-btn {
    padding: 10rpx;
}

.favorite-icon {
    width: 48rpx;
    height: 48rpx;
}

.guide-image {
    width: 100%;
    height: 400rpx;
    border-radius: 16rpx;
}

.guide-content {
    margin-top: 30rpx;
}

.guide-desc {
    font-size: 28rpx;
    color: #666;
    margin-top: 16rpx;
    line-height: 1.6;
}

.guide-meta {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 24rpx;
}

.guide-detail {
    margin-top: 30rpx;
    font-size: 28rpx;
    line-height: 1.8;
    color: #333;
}

/* 添加相关营地样式 */
.related-camps {
    margin-top: 30rpx;
    padding: 30rpx 0;
    background: #fff;
}

.section-header {
    padding: 0 30rpx;
    margin-bottom: 20rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.camp-scroll {
    width: 100%;
    white-space: nowrap;
}

.camp-list {
    display: inline-flex;
    padding: 0 20rpx;
}

.camp-item {
    display: inline-block;
    width: 300rpx;
    margin-right: 20rpx;
    border-radius: 12rpx;
    background: #fff;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
    overflow: hidden;
    flex-shrink: 0;
}

.camp-image {
    width: 300rpx;
    height: 200rpx;
    border-radius: 12rpx 12rpx 0 0;
}

.camp-info {
    padding: 16rpx;
}

.camp-name {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 8rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.camp-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.camp-score {
    font-size: 24rpx;
    color: #ff9800;
}

.camp-price {
    font-size: 24rpx;
    color: #f56c6c;
    font-weight: bold;
}
</style>